<template>
    <div class="LoginHeaderWrap noselect" style="width: 100%;">
        <div class="heard">
            <div class="headerCenter">
                <span v-if="!isLogin" class="heardLeft" @click="toLogin">亲,请登录</span>
                <span v-if="isLogin" class="heardLeftLogin">诗情画意</span>
                <div class="heardRight right">
                    <!--<span>首页</span>-->
                    <span @click="MyYC">
                        我的&nbsp;
                        <img :id="isMyYCList?'rotateImgOneS':'rotateImgOne'" src="./../../assets/img/login/LoginHeaderArrows.png" alt="">
                    </span>
                    <span @click="shopCenter">
                        <img src="./../../assets/img/login/LoginHeaderShop.png" alt="">
                        商家中心&nbsp;
                        <img :id="isShopCenterList?'rotateImgTwoS':'rotateImgTwo'" src="./../../assets/img/login/LoginHeaderArrows.png" alt="">
                    </span>
                    <span>联系客服</span>
                    <span @click="activityCenter">
                        活动中心&nbsp;
                    <img :id="isActivityCenterList?'rotateImgTwoS':'rotateImgTwo'" src="./../../assets/img/login/LoginHeaderArrows.png" alt="">
                    </span>
                </div>
                <div class="MyYC" :id="isMyYCList? 'Block': 'None'">
                    <p @click="HeaderSendMyYC(1)">宝贝分类管理</p>
                    <p @click="HeaderSendMyYC(2)">店铺基础信息</p>
                    <p @click="HeaderSendMyYC(3)">发布宝贝</p>
                    <p @click="HeaderSendMyYC(4)">评价</p>
                </div>
                <div class="shopCenterList" :id="isShopCenterList? 'Block': 'None'">
                    <p @click="HeaderSendCenter(1)">流量</p>
                    <p @click="HeaderSendCenter(2)">访客量</p>
                    <p @click="HeaderSendCenter(3)">交易单数</p>
                    <p @click="HeaderSendCenter(4)">成交额</p>
                    <p @click="HeaderSendCenter(5)">转化率</p>
<!--                    <p @click="HeaderSendCenter(6)">活动中心</p>-->
                </div>
                <div class="activityCenterList" :id="isActivityCenterList? 'Block': 'None'">
                    <p @click="HeaderSendActivity(1)">全部活动</p>
                    <p @click="HeaderSendActivity(2)">已报活动</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "loginHeader",
        data(){
            return {
                // 登录状态
                isLogin: false,
                // 控制我的List显示隐藏
                isMyYCList: false,
                // 控制商家中心List显示隐藏
                isShopCenterList: false,
                // 控制活动中心LIst显示隐藏
                isActivityCenterList: false,
                // 箭头旋转
                rotateDeg:180,
            }
        },
        methods:{
            // 我的
            MyYC(){
                this.isShopCenterList = false;
                this.isActivityCenterList = false;
                // 我的list的隐藏显示
                this.isMyYCList = !this.isMyYCList;
            },
            // 商家中心
            shopCenter(){
                this.isMyYCList = false;
                this.isActivityCenterList = false;
                // shopcenterlist的隐藏显示
                this.isShopCenterList = !this.isShopCenterList;
            },
            // 活动中心
            activityCenter(){
                this.isMyYCList = false;
                this.isShopCenterList = false;
                // activityCenterList的隐藏显示
                this.isActivityCenterList = !this.isActivityCenterList;
                console.log(this.isActivityCenterList);
            },
            // 页面跳转
            HeaderSendMyYC(index){
                this.global.startLoading();
                this.global.endLoading();
                switch(index) {
                    // 跳转宝贝分类管理
                    case 1:
                        this.$router.push({ path:'/myYC'});
                        break;
                    // 跳转店铺基础信息
                    case 2:
                        this.$router.push({ path:'/myStoreInfo'});
                        break;
                    // 跳转发布商品页面
                    case 3:
                        this.$router.push({ path:'/selectKind'});
                        break;
                    // 跳转评价
                    case 4:
                        this.$router.push({ path:'/myGoodsReviews'});
                        break;
                    default:

                }
            },
            // 页面跳转
            HeaderSendCenter(index){
                switch(index) {
                    // 跳转流量中心
                    case 1:
                        this.$router.push({ path:'/shopIndex'});
                        break;
                    // 跳转访客中心
                    case 2:
                        this.$router.push({ path:'/SCcaller'});
                        break;
                    // 跳转交易中心
                    case 3:
                        this.$router.push({ path:'/SCdeal'});
                        break;
                    // 跳转成交中心
                    case 4:
                        this.$router.push({ path:'/SCsucceed'});
                        break;
                    // 跳转转化率
                    case 5:
                        this.$router.push({ path:'/SCpercent'});
                        break;
                    // 跳转活动中心
                    case 6:
                        this.$router.push({ path:'/SCactivity'});
                        break;
                    default:

                }
            },
            // 页面跳转
            HeaderSendActivity(index){
                switch(index) {
                    // 跳转全部活动
                    case 1:
                        this.$router.push({ path:'/activityCenter'});
                        break;
                    // 跳转已报活动
                    case 2:
                        this.$router.push({ path:'/myActivity'});
                        break;
                    default:

                }
            },
            // 跳转登录页面
            toLogin(){
                this.$router.push({ path:'/'});
            }
        },
        mounted(){
            // 页面绑定点击事件,取消三个个List的显示
            $(document).bind('click', (e)=> {
                if(e.clientY > 50){
                    this.isMyYCList = false;
                    this.isShopCenterList = false;
                    this.isActivityCenterList = false;
                }
            });
        }
    }
</script>

<style scoped>


    *{
        font-family: "PingFang-SC-Bold";
    }
    /*头部*/
    .heard{
        height: 38px;
        margin: 0 auto;
        background:rgba(242,242,242,1);
        position: relative;
    }
    .headerCenter{
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .heardLeft{
        line-height: 38px;
        font-size:14px;
        font-weight:400;
        color:rgba(51,51,51,1);
        cursor: pointer;
    }
    .heardLeftLogin{
        line-height: 38px;
        font-size:14px;
        font-weight:400;
        color:rgba(51,51,51,1);
    }
    .heardRight{
        margin-top: 7px;
    }
    .heardRight span{
        display: inline-block;
        height: 25px;
        line-height: 25px;
        width:146px;
        font-size:14px;
        font-weight:400;
        text-align: center;
        color:rgba(51,51,51,1);
        cursor: pointer;
    }
    .heardRight span:nth-child(1){
        border-right: 1px solid #CCCCCC;
    }
    #rotateImgOne,#rotateImgTwo{
        position: relative;
        top: -5px;
        width: 7px;
        height: 4px;
    }
    #rotateImgOneS,#rotateImgTwoS{
        position: relative;
        top: -5px;
        width: 7px;
        height: 4px;
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg); 	/* Opera */
    }

    /*我的List样式*/
    .MyYC{
        position: absolute;
        width: 122px;
        right: 450px;
        background: #ffffff;
        box-shadow:0px 2px 4px 0px rgba(204,204,204,0.5);
        overflow: hidden;
    }
    /*商家中心List样式*/
    .shopCenterList{
        position: absolute;
        width: 122px;
        right: 310px;
        overflow: hidden;
        background:#ffffff;
        box-shadow:0px 2px 4px 0px rgba(204,204,204,0.5);
    }
    /* 活动中心List样式 */
    .activityCenterList{
        position: absolute;
        width: 122px;
        right: 0;
        overflow: hidden;
        background:#ffffff;
        box-shadow:0px 2px 4px 0px rgba(204,204,204,0.5);
    }
    .shopCenterList p, .MyYC p, .activityCenterList p{
        height: 24px;
        line-height: 24px;
        text-align: left;
        text-indent: 24px;
        color: #333333;
        font-weight:400;
        font-size: 14px;
        margin: 10px 0;
        cursor: pointer;
    }
    .shopCenterList p:hover, .MyYC p:hover, .activityCenterList p:hover{
        color: #EF3015;
        background:rgba(251,100,81,0.3);
    }






    .right{
        float: right;
    }
    .left{
        float: left;
    }
    #Block{
        display: block;
    }
    #None{
        display: none;
    }


</style>

